<template>
  <div class="content-wrapper">
    <el-page-header
      style="margin-top: 10px"
      size="small"
      :content="title"
      @click.native="$router.go(-1)"
    />
    <!-- <div class="title">
      <div>考核情况</div>
    </div>

    <el-divider></el-divider> -->
    <div class="content-container">
      <el-tabs v-model="activeTab">
        <el-tab-pane v-if="!mode" label="考试情况" name="examination">
          <Examination
            :examination-data="examinationData"
            @viewRecord="viewRecord"
            @getDataList="getDataList"
          />
        </el-tab-pane>
        <el-tab-pane v-if="!mode" label="学习情况" name="study">
          <Study
            :examination-data="examinationData"
            @viewRecord="viewRecord"
            @getDataList="getDataList"
          />
        </el-tab-pane>
        <el-tab-pane v-if="mode" label="实操情况" name="watch">
          <Watch
            :examination-data="examinationData"
            @viewRecord="viewRecord"
            @getDataList="getDataList"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <Pagination
      v-show="total > 0"
      :total="total"
      :page-number.sync="listQuery.pageNumber"
      :page-size.sync="listQuery.pageSize"
      @pagination="getDataList"
    /> -->
    <el-dialog class="view_record" :visible.sync="recordViewDialog" width="70%">
      <ExaminationRecordView
        :props-data="propsData"
        :dates="new Date().getMilliseconds()"
        @closeDialogVal="closeDialogVal"
        @getDataList="getDataList"
      />
    </el-dialog>
  </div>
</template>

<script>
import Examination from '@/views/train/train_list_record/components/Examination.vue'
import Study from '@/views/train/train_list_record/components/Study.vue'
import Watch from '@/views/train/train_list_record/components/Watch.vue'
import ExaminationRecordView from '@/views/train/components/ExaminationRecordView'
import { getExaminationRecord } from '@/api/ts/record'
import Pagination from '@/components/Pagination'
import { listReleaseUserByTrain } from '@/api/ts/record'

export default {
  components: { Examination, ExaminationRecordView, Watch, Pagination, Study },
  data() {
    return {
      total: 0,
      listLoading: true,
      listQuery: {
        belongType: null,
        belongTo: null,
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10000
      },
      activeTab: 'examination',
      examinationData: '',
      propsData: null,
      recordViewDialog: false,
      mode: '',
      title: ''
    }
  },
  mounted() {
    this.getDataList()
    this.mode = this.$route.query.mode.indexOf('assess_practical') !== -1
    if (this.mode) {
      this.activeTab = 'watch'
    }
    this.title = this.$route.query.trainName
    // console.log(this.$router.go(-1));
  },
  created() {
    this.getList()
  },
  methods: {
    viewRecord(row) {
      // 查看方法
      getExaminationRecord({
        examinationRecordId: row
      }).then((res) => {
        this.propsData = res.data
        this.recordViewDialog = true
      })
    },
    closeDialogVal(val) {
      // this.getDataList()
      this.recordViewDialog = val
    },

    getList() {},
    async getDataList() {
      // 获取数据列表
      await listReleaseUserByTrain({
        pageIndex: this.listQuery.pageIndex,
        pageSize: this.listQuery.pageSize,
        trainId: this.$route.query.trainId,
        withLearnRecords: true,
        withExaminationRecords: true,
        withPracticeRecords: true
      }).then((res) => {
        this.dataList = res.data
      })
      this.examinationData = {
        data: this.dataList
      }
    }
  }
}
</script>
